<template>
	<view class="container">
		<view class="title">
			电子通行证
		</view>
		<view class="img">
			<image :src="data.face_photo_url" mode="" style="width: 250rpx;height: 250rpx;"></image>
		</view>
		<view class="content">
			<view class="header">姓名</view>：
			<view class="name">{{data.name}}</view>
		</view>
		<view class="content">
			<view class="header">性别</view>：
			<view class="name">{{data.gender_label}}</view>
		</view>
		<view class="content">
			<view class="header">联系方式</view>：
			<view class="name">{{data.phone}}</view>
		</view>
		<view class="content">
			<view class="header">身份证号</view>：
			<view class="name">{{data.id_card}}</view>
		</view>
		<view class="content">
			<view class="header">来访单位</view>：
			<view class="name">{{data.visitor_company}}</view>
		</view>
		<view class="content">
			<view class="header">来访人数</view>：
			<view class="name">{{data.visitor_count}}</view>
		</view>
		<view class="content">
			<view class="header">受访单位</view>：
			<view class="name">{{data.visit_company}}</view>
		</view>
		<view class="content">
			<view class="header">受访人名</view>：
			<view class="name">{{data.visit_person}}</view>
		</view>
		<view class="content">
			<view class="header">入园日期</view>：
			<view class="name">{{data.visit_date}}</view>
		</view>
		<view class="content">
			<view class="header">事由</view>：
			<!-- {{data.reason}} -->
			<view class="name">
				<up-text size="30rpx" color="#fff" :lines="3" :text="data.reason"></up-text>
			</view>
		</view>
		<view class="time">
			{{currentTime}}
		</view>
	</view>
</template>

<script>
	import {
		getPass
	} from '../../api/reportedMaintenance.js'
	export default {
		data() {
			return {
				currentTime: '',
				data: {}
			};
		},
		mounted() {
			// 初始化时间
			this.updateTime();
			// 每秒更新一次
			this.timer = setInterval(this.updateTime, 1000);
		},
		beforeDestroy() {
			clearInterval(this.timer);
		},
		created() {
			this.getList()
		},
		methods: {
			getList() {
				getPass().then((res) => {
					if(res.code == 2000){
						this.data = res.data
					}
				})
			},
			updateTime() {
				const now = new Date();
				const hours = now.getHours().toString().padStart(2, "0");
				const minutes = now.getMinutes().toString().padStart(2, "0");
				const seconds = now.getSeconds().toString().padStart(2, "0");
				this.currentTime = `${hours}:${minutes}:${seconds}`;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #70ad47;
		min-height: 100vh;

		.title {
			padding-top: 80rpx;
			font-size: 50rpx;
			color: #ea8a1d;
			font-weight: bold;
			text-align: center;
		}

		.img {
			margin: 80rpx 0 50rpx 0;
			text-align: center;
			height: 250rpx;
			display: flex;
			justify-content: center;
		}

		.content {
			padding: 15rpx 150rpx;
			color: #fff;
			display: flex;
			/* 使用弹性布局实现左右对齐 */
			flex-direction: row;
			/* 水平排列 */
			align-items: center;
			/* 垂直居中 */
			// margin-bottom: 10rpx;
			font-size: 30rpx;

			/* 每行的间距 */
			.header {
				width: 150rpx;
				height: 30rpx;
				/* 固定宽度 */
				font-weight: bold;
				/* 字体加粗 */
				display: inline-block;
				/* 确保标签占满可用宽度 */
				text-align: justify;

				/* 两端对齐 */
				&::after {
					content: '';
					display: inline-block;
					width: 150rpx;
					/* 占满一行，触发 justify */
				}
			}

			.name {
				flex: 1;
				/* 自动占满剩余空间 */
				word-wrap: break-word;
				/* 文字换行 */
				margin-left: 30rpx;
			}
		}

		.time {
			margin-top: 50rpx;
			color: #fff;
			font-size: 60rpx;
			text-align: center;
			padding-bottom: 100rpx;
		}
	}
</style>